<template>
  <div class="searchContainer">
    <div class="searchHeader">
      <van-icon name="arrow-left" color="#fff" @click="$router.back()" />
      <van-search v-model.trim="keyword" shape="round" @search="searchResult(keyword)" background="pink" clearable v-searchFocus @input="autoCompletion " placeholder="请输入搜索关键词" />
    </div>
    <div class="sug-list">
      <div class="sug-item" v-for="(item, index) in searchLists" :key="index"  @click="searchResult(keyword)" v-html="lightFn(item, keyword)"></div>
    </div>
    <div class="historyBox" v-if="searchLists.length === 0">
      <van-cell title="搜索历史">
        <template #right-icon>
          <van-icon name="delete" class="search-icon" @click="removeHistory"></van-icon>
        </template>
      </van-cell>
      <van-cell>
        <div class="historyContent">
          <span v-for="(item, index) in searchHistory" :key="index" @click="searchResult(item)">{{item}}</span>
        </div>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { autoCompletionAPI } from '@/api'
export default {
  data () {
    return {
      keyword: '',
      timer: null, // 防抖定时器
      searchLists: [],
      searchHistory: JSON.parse(localStorage.getItem('history')) || []
    }
  },
  methods: {
    // 自动补全
    autoCompletion () {
      clearTimeout(this.timer)
      if (this.keyword.length === 0) {
        this.searchLists = []
      } else {
      // 防抖
        this.timer = setTimeout(async () => {
          const res = await autoCompletionAPI(this.keyword)
          res.data.data.options.forEach(item => {
          })
          this.searchLists = res.data.data.options
        }, 300)
      }
    },
    // 搜索关键字高亮显示
    lightFn (originStr, target) {
      if (originStr === null) return
      const reg = new RegExp(target, 'ig')
      return originStr.replace(reg, (match) => {
        return `<span style="color: red">${match}</span>`
      })
    },
    // 搜索结果
    searchResult (keyword) {
      if (!keyword) {
        this.$notify({ type: 'warning', message: '请输入搜索内容！' })
      } else {
        this.searchHistory.push(keyword)
        this.searchHistory = [...new Set(this.searchHistory)]
        this.$nextTick(() => {
          this.$router.push({ path: `/search_result/${keyword}` })
        })
      }
    },
    removeHistory () {
      localStorage.removeItem('history')
      this.searchHistory = []
    }
  },
  watch: {
    searchHistory: {
      deep: true,
      handler () {
        localStorage.setItem('history', JSON.stringify(this.searchHistory))
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .searchHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: pink;
    /deep/ .van-icon {
      padding-left: 10px;
      box-sizing: border-box;
    }
    .van-search {
      width: 90%;
    }
  }
  .sug-list {
    .sug-item {
      padding: 0 15px;
      border-bottom: 1px solid #f8f8f8;
      font-size: 14px;
      line-height: 50px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .historyContent {
    display: flex;
    flex-wrap: wrap;
    span {
      padding: 2px 10px;
      background-color: #eee;
      border-radius: 10px;
      margin-right: 20px;
      margin-bottom: 10px;
    }
  }
</style>
